<template>
  <div id="app">
    <div class="phone" v-if="!PC">
      <router-view/>
      <div class="nav">
        <div class="nav-item" @click="toRouter('/home/game/gameHot', 0)" :class="{active:$route.meta.root === 'game'}">
          <i class="nav-icon-game" :class="{active:$route.meta.root === 'game'}"></i>
          <p class="text">游戏</p>
        </div>
        <div class="nav-item" @click="toRouter('/gift/newest', 1)" :class="{active:$route.meta.root === 'gift'}">
          <i class="nav-icon-gift" :class="{active:$route.meta.root === 'gift'}"></i>
          <p class="text">礼包</p>
        </div>
        <div class="nav-item" @click="toRouter('/me', 3)" :class="{active:$route.meta.root === 'me'}">
          <i class="nav-icon-me" :class="{active:$route.meta.root === 'me'}"></i>
          <p class="text">我的</p>
        </div>
      </div>
    </div>
    <div class="pc" v-if="PC">
      <div class="pc-header">
        <span class="home-logo">
          <a href="javascript:;" @click="goHome">
          <img width="100%" height="100%" src="./assets/img/home-logo.png">
          </a>
        </span>
        <span class="login">
          <div v-if="!isLogin">
            <a href="javascript:;" class="login-btn" @click="PCLogin">登录</a>
            <a href="javascript:;" class="register-btn" @click="PCRegister">注册</a>
          </div>
          <div v-else>
             <a href="javascript:;" class="out-btn" @click="PCOut">切换用户</a>
          </div>
        </span>
      </div>
      <div class="pc-content">
        <div class="background">
          <img width="100%" height="100%" src="./assets/img/home-background.png"/>
        </div>
        <div class="simulator-wrapper">
          <div class="simulator-phone">
            <img width="100%" height="100%" src="./assets/img/simulator.png">
            <div class="pc-tips" v-if="!isWebkit">
              <img width="100%" height="100%" src="./assets/img/pc-tips.png">
            </div>
            <div class="screen-wrapper">
              <div class="screen" :class="{'no-webkit': !isWebkit}">
                <router-view/>
              </div>
            </div>
            <div class="nav">
              <div class="nav-item" @click="toRouter('/home/game/gameHot', 0)"
                   :class="{'active':$route.meta.root === 'game'}">
                <i class="nav-icon-game" :class="{'nav-icon-game-active':$route.meta.root === 'game'}"></i>
                <p class="text">游戏</p>
              </div>
              <div class="nav-item" @click="toRouter('/gift/newest', 1)"
                   :class="{active:$route.meta.root === 'gift'}">
                <i class="nav-icon-gift" :class="{'nav-icon-gift-active':$route.meta.root === 'gift'}"></i>
                <p class="text">礼包</p>
              </div>
              <div class="nav-item" @click="toRouter('/me', 3)" :class="{active:$route.meta.root === 'me'}">
                <i class="nav-icon-me" :class="{'nav-icon-me-active':$route.meta.root === 'me'}"></i>
                <p class="text">我的</p>
              </div>
            </div>
          </div>
        </div>
        <div class="no-down">
          <img width="100%" height="100%" src="./assets/img/noDown.png"/>
        </div>
        <div class="QR-code-wrapper">
          <div class="QR-code">
            <img width="100%" height="100%" src="./assets/img/QR-home.png">
          </div>
          <p class="QR-text">微信扫码，随时开玩~</p>
        </div>
        <div class="footer">
          <p class="footer-text">
            电话：0755-86726600 (am 9:00-pm 6:00)&nbsp;&nbsp;&nbsp;&nbsp;地址：深圳市南山区长园新材料港1栋501
          </p>
          <p class="footer-text">
            Copyright © 2017 深圳我赞科技有限公司保留所有权利 粤ICP备16063998号-1
          </p>
        </div>
      </div>
      <transition name="fade">
        <pc-login v-if="login"></pc-login>
        <pc-register v-if="register"></pc-register>
        <pc-forget v-if="forget"></pc-forget>
      </transition>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import PcLogin from './components/login/login'
  import PcRegister from './components/register/register'
  import PcForget from './components/forget/forget'
  import {MessageBox} from 'mint-ui'

  export default {
    data() {
      return {
        gameUrl: '',
        isLogin: false,
        login: false,
        register: false,
        forget: false,
        hasLogin: false,
        screenWidth: document.body.clientWidth
      }
    },
    methods: {
      toRouter(target, index) {
        this.$router.push({path: `${target}`})
      },
      PCLogin() {
        this.register = false
        this.forget = false
        this.login = true
      },
      PCRegister() {
        this.login = false
        this.forget = false
        this.register = true
      },
      PCOut() {
        MessageBox({
          title: '提示',
          message: '确定要退出吗？',
          showCancelButton: true
        }).then(action => {
          if (action === 'confirm') {
            this.$http.get('/game/index.php?m=Home&c=PcApi&a=out').then((response) => {
              if (response.data.code === this.ERROR_OK) {
                this.Toast({
                  message: '退出成功'
                })
                localStorage.clear()
                sessionStorage.clear()
                setTimeout(() => {
                  location.reload()
                }, 500)
              } else {
                this.Toast({
                  message: '服务器繁忙，请稍后再试',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      PCForget() {
        this.login = false
        this.register = false
        this.forget = true
      },
      goHome() {
        this.$router.push({path: '/'})
      }
    },
    watch: {
      screenWidth() {
        location.reload()
      }
    },
    created() {
      if (sessionStorage.getItem('isLogin')) {
        this.hasLogin = sessionStorage.getItem('isLogin')
      }
      this.$http.get('/game/index.php?m=Home&c=Api&a=getChannelName').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          document.title = response.data.data.title
        }
      })
      //调用用户信息
      this.$http.get('/game/index.php?m=Home&c=Api&a=getUsersInfo').then((response) => {
        if (response.data.code === this.ERROR_OK) {
          Vue.userInfo = response.data.data
          if (Vue.userInfo.id) {
            this.isLogin = true
          }
        }
      })
    },
    mounted() {
      this.eventBus.$on('pcRegister', (stat) => {
        if (stat) {
          this.PCRegister()
        }
      })
      this.eventBus.$on('pcLogin', (stat) => {
        if (stat) {
          this.PCLogin()
        }
      })
      this.eventBus.$on('pcForget', (stat) => {
        if (stat) {
          this.PCForget()
        }
      })
      this.eventBus.$on('closeBox', (stat) => {
        if (stat) {
          this.login = false
          this.register = false
          this.forget = false
        }
      })
      if (this.PC) {
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth
            this.screenWidth = window.screenWidth
          })()
        }
      }
    },
    components: {
      PcLogin,
      PcRegister,
      PcForget
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../src/assets/stylus/mixin.styl"
  #app
    .phone
      box-sizing border-box
      padding-bottom 96px
      .tips
        position absolute
        width 100%
        top 78px
        font-size 20px
        text-align center
        color #FF4136
      .btn-readonly
        background #ccc
      .nav
        display inline-flex
        height 96px
        width 100%
        position fixed
        bottom 0
        left 0
        background #fff
        text-align center
        align-items center
        border-top 2px solid rgba(0, 0, 0, .2)
        .nav-item
          flex 1
          color #333
          &.active
            color #2ECC40
          .nav-icon-game, .nav-icon-gift, .nav-icon-tribe, .nav-icon-me
            display block
            width 41px
            height 41px
            margin auto
            background-repeat no-repeat
            background-size cover
          .nav-icon-game
            background-image url("../src/assets/img/game-init@2x.png")
            &.active
              background-image url("../src/assets/img/game-active@2x.png")
          .nav-icon-gift
            background-image url("../src/assets/img/gift-init@2x.png")
            &.active
              background-image url("../src/assets/img/gift-active@2x.png")
          .nav-icon-tribe
            background-image url("../src/assets/img/discuss-init@2x.png")
            &.active
              background-image url("../src/assets/img/discuss-active@2x.png")
          .nav-icon-me
            background-image url("../src/assets/img/me-init@2x.png")
            &.active
              background-image url("../src/assets/img/me-active@2x.png")
          .text
            margin-top 11px
</style>

<style type="text/css">
  .pc {
    height: 100%;
  }

  .pc .no-webkit {
    width: 369px !important;
  }

  .pc .tips {
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    text-align: center;
    font-size: 18px;
    color: #FF4136;
  }

  .pc .mint-cell {
    margin-top: 24px;
    min-height: 20px;
    height: 48px;
    border: 2px solid #ccc;
    border-radius: 4px;
  }

  .pc ::-webkit-scrollbar {
    display: none;
  }

  .pc .btn-submit-pc {
    display: block;
    margin-top: 24px;
    width: 100%;
    height: 48px;
    text-align: center;
    border-radius: 4px;
    font-size: 24px;
    line-height: 48px;
    color: #fff;
    background: #2ECC40;
  }

  .pc .btn-readonly-pc {
    background: #ccc;
  }

  .pc .pc-header {
    position: relative;
    width: 100%;
    height: 68px;
    background: #fff;
  }

  .pc .pc-header .home-logo {
    display: block;
    margin-left: 360px;
    padding-top: 15px;
    width: 186px;
    height: 38px;
    min-width: 100px;
  }

  .pc .pc-header .login {
    position: absolute;
    display: block;
    min-width: 100px;
    top: 17px;
    right: 360px;
  }

  .pc .pc-header .login .login-btn, .pc .pc-header .login .register-btn, .pc .pc-header .login .out-btn {
    display: block;
    float: left;
    width: 53px;
    height: 32px;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    white-space: nowrap;
    border-radius: 9px;
    border: none;
  }

  .pc .pc-header .login .login-btn {
    background: #fff;
    color: #FECC2E;
  }

  .pc .pc-header .login .register-btn {
    background: #FECC2E;
    color: #fff;
  }

  .pc .pc-header .login .out-btn {
    width: 83px;
    background: #FECC2E;
    color: #fff;
  }

  .pc .pc-content .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }

  .pc .pc-content {
    width: 100%;
    height: 100%;
  }

  .pc .pc-content .background img {
    border-radius: 0;
  }

  .pc .pc-content .simulator-wrapper {
    position: relative;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone {
    position: relative;
    margin: auto;
    width: 414px;
    height: 782px;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .screen-wrapper {
    position: absolute;
    box-sizing: border-box;
    top: 91px;
    left: 34px;
    width: 350px;
    height: 623px;
    background: #fff;
    overflow: hidden;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .screen-wrapper .screen {
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 350px;
    height: 623px;
    background: #fff;
    overflow-y: scroll;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav {
    position: absolute;
    display: inline-flex;
    height: 1.28rem;
    width: 350px;
    top: 666px;
    left: 34px;
    background: #fff;
    text-align: center;
    align-items: center;
    border-top: 0.026667rem solid rgba(0, 0, 0, 0.2);
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item {
    flex: 1;
    color: #333;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .active {
    color: #2ECC40;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-game,
  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-gift,
  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-tribe,
  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-me {
    display: block;
    width: 0.546667rem;
    height: 0.546667rem;
    margin: auto;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-game {
    background-image: url("../src/assets/img/game-init@3x.png");
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-game-active {
    background-image: url("../src/assets/img/game-active@3x.png");
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-gift {
    background-image: url("../src/assets/img/gift-init@3x.png");
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-gift-active {
    background-image: url("../src/assets/img/gift-active@3x.png");
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-tribe {
    background-image: url("../src/assets/img/discuss-init@3x.png");
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-tribe-active {
    background-image: url("../src/assets/img/discuss-active@3x.png");
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-me {
    background-image: url("../src/assets/img/me-init@3x.png")
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .nav-icon-me-active {
    background-image: url("../src/assets/img/me-active@3x.png");
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .nav .nav-item .text {
    margin-top: 0.14666666666666667rem;
  }

  .pc .pc-content .simulator-wrapper .simulator-phone .gameHtml-wrapper {
    position: absolute;
    top: 91px;
    left: 34px;
    width: 350px;
    height: 623px;
    overflow: hidden;
    background: #fff;
    z-index: 9999;
  }

  .pc .pc-content .no-down {
    position: absolute;
    left: 577px;
    top: 500px;
    width: 144px;
    height: 262px;
  }

  .pc .pc-content .simulator-phone .pc-tips {
    position: absolute;
    top: 10px;
    right: -300px;
    width: 291px;
    height: 199px;
  }

  @media screen and (max-width: 1874px) {
    .pc .pc-content .no-down {
      left: 500px;
    }
  }

  @media screen and (max-width: 1726px) {
    .pc .pc-content .no-down {
      left: 400px;
    }
  }

  @media screen and (max-width: 1520px) {
    .pc .pc-content .no-down {
      left: 300px;
    }
  }

  @media screen and (max-width: 1280px) {
    .pc .pc-content .no-down {
      left: 200px;
    }
  }

  .pc .pc-content .QR-code-wrapper {
    position: absolute;
    top: 393px;
    right: 380px;
    text-align: center;
  }

  @media screen and (max-width: 1874px) {
    .pc .pc-content .QR-code-wrapper {
      right: 300px;
    }
  }

  @media screen and (max-width: 1726px) {
    .pc .pc-content .QR-code-wrapper {
      right: 220px;
    }
  }

  @media screen and (max-width: 1520px) {
    .pc .pc-content .QR-code-wrapper {
      right: 140px;
    }
  }

  @media screen and (max-width: 1280px) {
    .pc .pc-content .QR-code-wrapper {
      right: 100px;
    }
  }

  .pc .pc-content .QR-code-wrapper .QR-code {
    width: 200px;
    height: 200px;
  }

  .pc .pc-content .QR-code-wrapper .QR-code img {
    border-radius: 0;
  }

  .pc .pc-content .QR-code-wrapper .QR-text {
    margin-top: 16px;
    font-size: 22px;
  }

  .pc .footer {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .pc .footer .footer-text {
    margin-top: 8px;
    font-size: 16px;
    color: #000;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
